<template>
  <a-drawer
      :visible="visible"
      @close="updateVisible(false)"
      :body-style="{backgroundColor: '#000', color: '#fff !important'}"
      width="100%"
  >
    <template #title>
      <div class="flex align-center">
        <img :src="form.icon" alt=""/>
        <span>攻击数量: {{ totals?.restrainNum }}; 被攻击数量: {{ totals?.beRestrainNum }}</span>
        <a-input-number v-model:value="select.value" style="margin-left: 10px"></a-input-number>
        <div style="margin-left: 10px;width: 100%" class="flex align-center justify-between flex-wrap">
          <a-button @click="select.value = 4" type="primary">4</a-button>
          <a-button @click="select.value = 2.75" type="primary">2.75</a-button>
          <a-button @click="select.value = 2.625" type="primary">2.625</a-button>
          <a-button @click="select.value = 2.5" type="primary">2.5</a-button>
          <a-button @click="select.value = 2.375" type="primary">2.375</a-button>
          <a-button @click="select.value = 2.25" type="primary">2.25</a-button>
          <a-button @click="select.value = 2.125" type="primary">2.125</a-button>
          <a-button @click="select.value = 1.5" type="primary">1.5</a-button>
          <a-button @click="select.value = 1.375" type="primary">1.375</a-button>
          <a-button @click="select.value = 1.25" type="primary">1.25</a-button>
          <a-button @click="select.value = 1.125" type="primary">1.125</a-button>
          <a-button @click="select.value = 0.875" type="primary">0.875</a-button>
          <a-button @click="select.value = 0.75" type="primary">0.75</a-button>
          <a-button @click="select.value = 0.625" type="primary">0.625</a-button>
          <a-button @click="select.value = 0.5" type="primary">0.5</a-button>
          <a-button @click="select.value = 0.375" type="primary">0.375</a-button>
          <a-button @click="select.value = 0.25" type="primary">0.25</a-button>
          <a-button @click="select.value = 0.125" type="primary">0.125</a-button>
          <a-button type="primary" @click="confirm">确认</a-button>
        </div>
      </div>
    </template>
    <a-form>
      <a-row>
        <a-col :span="24">
          <a-form-item>
            <template #label>
              <span class="text-white">攻击效果</span>
            </template>
            <div class="flex align-center flex-wrap" style="width: 100%">
              <div v-for="(item, index) in restrainDetailList" class="margin-bottom-sm">
                <div class="flex justify-center">
                  <a-checkbox @change="selectCheckbox(item)" v-model:checked="item.checked">
                    <img :src="item.icon" alt="">
                  </a-checkbox>
                </div>
                <div class="flex align-center justify-center" style="width: 140px">
                  <a-input-number v-model:value="item.value"/>
                </div>
              </div>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item>
            <template #label>
              <span class="text-white">被攻击效果</span>
            </template>
            <div class="flex align-center flex-wrap" style="width: 100%">
              <div v-for="(item, index) in beRestrainDetailList" class="margin-bottom-sm">
                <div class="flex justify-center">
                  <a-checkbox @change="selectCheckbox(item)" v-model:checked="item.checked">
                    <img :src="item.icon" alt="">
                  </a-checkbox>
                </div>
                <div class="flex align-center justify-center" style="width: 140px">
                  <a-input-number v-model:value="item.value"/>
                </div>
              </div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>

<script setup>
  import {computed, reactive, ref, watch} from "vue";
  import {saveRestrain} from "../../../../api/restrain/index.js";
  import {message} from "ant-design-vue";

  const props = defineProps({
    visible: Boolean,
    data: Object,
    restrain: Array
  })

  const emit = defineEmits(['update:visible', 'done']);

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };

  const select = ref({
    id: [],
    value: 1
  })

  const isRestrain = ref(true)

  const filterOption = (input, option) => {
    let arr = []
    for (let i = 0; i < input.length; i++) {
      arr.push(option.cn.indexOf(input[i]) >= 0)
    }
    return arr.every(item => item)
  };

  const selectRestrain = () => {
    restrainDetailList.value = restrainDetailList.value.filter(item => item.checked)
    restrainDetailList.value.forEach(item => {
      item.value = select.value.value
    })
    beRestrainDetailList.value = beRestrainDetailList.value.filter(item => item.checked)
    beRestrainDetailList.value.forEach(item => {
      item.value = select.value.value
    })
    // if (isRestrain.value) {
    //   restrainDetailList.value.forEach(item => {
    //     select.value.id.forEach(v => {
    //       if (item.id === v) {
    //         item.value = select.value.value
    //       }
    //     })
    //   })
    // } else {
    //   beRestrainDetailList.value.forEach(item => {
    //     select.value.id.forEach(v => {
    //       if (item.id === v) {
    //         item.value = select.value.value
    //       }
    //     })
    //   })
    // }
    // select.value.id = []
  }

  const selectCheckbox = (item) => {
    if(item.checked) {
      item.value = select.value.value
    }else {
      item.value = 1
    }
  }

  const form = reactive({
    id: 1,
    cn: '',
    icon: '',
    restrain_detail: '',
    be_restrained_detail: ''
  })

  const restrainDetailList = ref([])

  const beRestrainDetailList = ref([])

  const confirm = () => {
    const restrainData = {}
    let arr1 = restrainDetailList.value.filter(item => item.value !== 1)
    arr1.forEach(item => {
      restrainData[item.id] = item.value
    })

    const beRestrainData = {}
    let arr2 = beRestrainDetailList.value.filter(item => item.value !== 1)
    arr2.forEach(item => {
      beRestrainData[item.id] = item.value
    })
    saveRestrain({
      id: props.data.id,
      restrain_detail: JSON.stringify(restrainData),
      be_restrained_detail: JSON.stringify(beRestrainData)
    }).then((msg) => {
      message.success(msg)
      updateVisible(false)
      emit('done')
    })
  }

  const totals = computed(() => {
    let restrainNum = 0
    if (restrainDetailList.value.length > 0) {
      restrainDetailList.value.forEach((item) => {
        if (item?.value !== 1) {
          restrainNum++
        }
      })
    }
    let beRestrainNum = 0
    if (beRestrainDetailList.value.length > 0) {
      beRestrainDetailList.value.forEach((item) => {
        if (item?.value !== 1) {
          beRestrainNum++
        }
      })
    }
    return {restrainNum, beRestrainNum}
  })

  watch(
      () => props.visible,
      (newVal) => {
        if (newVal) {
          Object.assign(form, props.data)
          let arr
          arr = props.restrain.map(item => {
            return {
              id: item.id,
              icon: item.icon,
              checked: false,
              value: 1
            }
          })
          restrainDetailList.value = JSON.parse(JSON.stringify(arr))
          restrainDetailList.value.forEach(item => {
            item.checked = false
          })
          beRestrainDetailList.value = JSON.parse(JSON.stringify(arr))
          beRestrainDetailList.value.forEach(item => {
            item.checked = false
          })
          if (form.restrain_detail) {
            let obj = JSON.parse(form.restrain_detail)
            for (let key in obj) {
              restrainDetailList.value.forEach(item => {
                if (item.id === Number(key)) {
                  item.value = obj[key]
                }
              })
            }
            restrainDetailList.value.sort((a, b) => b.value - a.value)
          }
          if (form.be_restrained_detail) {
            let obj = JSON.parse(form.be_restrained_detail)
            for (let key in obj) {
              beRestrainDetailList.value.forEach(item => {
                if (item.id === Number(key)) {
                  item.value = obj[key]
                }
              })
              beRestrainDetailList.value.sort((a, b) => b.value - a.value)
            }
          }
        } else {
          restrainDetailList.value = []
          beRestrainDetailList.value = []
          select.value = {
            id: 1,
            value: 1
          }
        }
      }
  );
</script>

<style scoped>

</style>
